<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <script src="../public/cdn/avue/2.12.1/avue.js"></script>
        <link rel="stylesheet" href="../public/cdn/avue/2.12.1/index.css">
        <script type="text/javascript" src="../public/cdn/axios/1.0.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    </head>

    <body>
        <div id="app">
            <el-card>
                <el-time-picker
                        v-model="timeValue"
                        is-milliseconds
                        placeholder="选择时间">
                </el-time-picker>
                <avue-crud ref="crud" :data="tableData" :search="query" :permission="permissions" :option="tableOption" :page="page"
                           @on-load="onload"
                           @search-change="searchChange"
                           @search-reset="resetChange"
                           @selection-change="selectionChange"
                           @refresh-change="refreshChange"
                           @row-update="rowUpdate"
                           @row-save="rowSave"
                           @row-del="rowDel"
                >
                    <template slot-scope="{row,index}"
                              slot="my">
                        <div @click="draw" :style="{ width: '100%', height: '200px' }">{{index}}</div>
<!--                        <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>-->
                    </template>
                </avue-crud>
            </el-card>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            components: {},
            data: {
                timeValue: '',
                title: "标题",
                tableData: [
                    {
                        "name": "名字1",
                        "age": 18,
                        // "sex": 1,
                        "city": "440100",
                        "createDate": "2023-12-01 10:00:00"
                    },
                    {
                        "name": "名字2",
                        "age": 28,
                        "sex": 2,
                        "city": "440400"
                    }
                ],
                permissions: {  // 可通过权限控制按钮的显示与隐藏，这种能覆盖option里的配置
                    // menu: true,  // 操作列
                    // viewBtn: false, // 操作列中的查看按钮
                    // editBtn: false, // 操作列中的编辑按钮
                    // delBtn: false, // 操作列中的删除按钮
                    // addBtn: true, // 菜单中的新增按钮
                    batchDelBtn: true  // 自定义的批量删除按钮
                },
                query: {
                    sex: 2,
                },
                selectionList: [],
                page: {
                    "total": 0,
                    "pageCount": 0,
                    "currentPage": 1,
                    "pageSize": 10,
                    "pageSizes": [
                        10,
                        20,
                        30,
                        50
                    ],
                    "layout": "total, sizes, prev, pager, next, jumper",
                    "background": true
                },
                tableOption: {
                    grid: true,
                    gridSpan: 12,
                    dicData: {
                        "CITY": [
                            {
                                "label": "广州市",
                                "value": "440100"
                            },
                            {
                                "label": "深圳市",
                                "value": "440300"
                            }
                        ]
                    },
                    "column": [
                        {
                            label: "用户名",
                            prop: "name",
                            span: 12,
                            // searchLabelWidth: 110, // 标题的宽度
                            searchOrder: -1, // 大的排前面，默认为0；搜索字段排序不影响表格顺序
                            search: true,
                            rules: [{
                                required: true, // 编辑dialog时，是否必填，true时如果为空无法提交
                                message: "用户名不能为空", // 当为空提交时，提示语
                                trigger: "blur"
                            }]
                        },
                        {
                            "label": "性别",
                            "prop": "sex",
                            "type": "radio",
                            "value": 1,
                            "search": true,
                            "dicData": [
                                {
                                    "label": "男",
                                    "value": 1
                                },
                                {
                                    "label": "女",
                                    "value": 2
                                }
                            ]
                        },
                        {
                            // gridRow: true,
                            "label": "年龄",
                            show: false,
                            "prop": "age",
                            "type": "password",
                            showPassword: false
                        },
                        {
                            "label": "自定义内容",
                            show: false,
                            gridRow: true,
                            "prop": "my",
                        },
                    ]
                },
                echart: {
                    option: {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['50%', '70%'],
                                // adjust the start and end angle
                                startAngle: 180,
                                endAngle: 360,
                                data: [
                                    { value: 1048, name: 'Search Engine' },
                                    { value: 735, name: 'Direct' },
                                    { value: 580, name: 'Email' },
                                    { value: 484, name: 'Union Ads' },
                                    { value: 300, name: 'Video Ads' }
                                ]
                            }
                        ]
                    }
               }
            },
            mounted() {

            },
            methods: {
                draw(event) {
                    // 基于准备好的dom，初始化echarts实例
                    echarts.init(event.target).setOption(this.echart.option);
                },
                // 初始化列表
                onload(page, params = {}) {
                    // 在页面上弹出提示分页信息
                    this.$message.success('onload--》分页信息' + JSON.stringify(page))
                    this.page.total = 141
                },
                resetChange (item) {
                    this.$message.success('resetChange--》点击了清空' + JSON.stringify(item))
                },
                searchChange (params, done) {
                    this.query = params;
                    this.page.currentPage = 1;
                    this.$message.success('searchChange--》开始搜索。。。请耐心等待')
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        this.$message.success("searchChange--》搜索完毕，请求参数为：" + JSON.stringify(params));
                    }, 2000)
                },
                refreshChange() {
                    this.$message.success('refreshChange');
                    // this.onload(this.page, this.query);
                },
                rowSave(row, done, loading) {
                    this.$message.success('开始保存。。。请耐心等待')
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        // loading(); // loading()方法用于显示等待状态
                        this.$message.success("保存完毕，请求参数为：" + JSON.stringify(row));
                    }, 2000)
                },
                rowUpdate(row, index, done, loading) {
                    loading(); // 用于禁止表单关闭和重复提交
                    this.$message.success('开始编辑。。。请耐心等待')
                    console.log(row, index, done, loading);
                    setTimeout(() => {
                        this.$message.success("编辑完毕，row为：" + JSON.stringify(row) + ";index=" + index);
                        // done方法用于关闭等待状态
                        done();
                    }, 2000)
                },
                rowDel(row, index, done, loading) {
                    this.$message.success('开始删除。。。请耐心等待')
                    loading(); // 用于禁止表单关闭和重复提交
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        this.$message.success("删除完毕，请求参数为：" + JSON.stringify(row));
                    }, 1000)
                },
                selectionChange(list) {
                    this.$message.success('selectionChange--》选中列表为：' + JSON.stringify(list));
                    this.selectionList = list;
                },
                deleteSelected() {
                    this.$message.success('deleteSelected--》开始删除选中列表。。。请耐心等待')
                    setTimeout(() => {
                        this.$message.success("deleteSelected--》删除选中列表完毕，选中列表为：" + JSON.stringify(this.selectionList));
                    }, 1000)
                }
            }
        })
    </script>
</html>

<style>
    .avue-crud__grid__value {
        width: 100%
    }
</style>
